<template>
	<div class="publicformview">
			<!-- <el-button v-if='blockType==4||blockType==2' type="primary" size="mini" @click="alldelete">批量删除</el-button> -->
			<el-button v-if='blockType==4||blockType==2' type="primary" @click="dialogVisible = true" size="mini">上传文件</el-button>
		<div class="bottomTop" style="margin-top: 10px;">
			<el-table @selection-change="selectChange" max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column type="selection" align="center" prop="phone">
				</el-table-column>
				
				<el-table-column align="center" label="图形序号" prop="maporderno">
				</el-table-column>

				<el-table-column align="center" label="图形说明" prop="maptext">
				</el-table-column>

				<el-table-column align="center" label="图形编号" prop="mapno">
				</el-table-column>

				<el-table-column align="center" label="图形文件" prop="mapfile" width="360">
					<template slot-scope="scope">
						<el-image
						 @click="chakan(scope.row.mapfile)"
						      style="width: 200px; height: 50px"
						      :src="scope.row.mapfile"
						      fit="contain"></el-image>
						<!-- <el-button type="text" size="mini" @click="chakan(scope.row.mapfile)">{{scope.row.mapfile}}</el-button> -->
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" width="240">
					<template slot-scope="scope" v-if='blockType==4||blockType==2'>
						<el-button type="text" size="mini" @click="chakan(scope.row.mapfile)">查看文件</el-button>
						<el-button style="color: #FF4C4F;" type="text" size="mini"
							@click="handleDelete(scope.row.mapid)">删除文件</el-button>
					</template>
				</el-table-column>

			</el-table>
		</div>
		<div class="publicpaginationview">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
		</div>

		<!-- <div class="saveContent" v-if='blockType==4||blockType==2'>
			<el-button type="primary" @click="dialogVisible = true" size="medium">上传文件</el-button>
		</div> -->

		<el-dialog title="上传文件" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form :model="addQuery" ref="dataForm" class="demo-ruleForm" label-width="100px">
				<el-form-item label="图形序号：" prop="maporderno">
					<el-input v-model="addQuery.maporderno"></el-input>
				</el-form-item>
				<el-form-item label="图形说明：" prop="maptext">
					<el-input v-model="addQuery.maptext"></el-input>
				</el-form-item>
				<el-form-item label="图形编号：" prop="mapno">
					<el-input v-model="addQuery.mapno"></el-input>
				</el-form-item>
			</el-form>

			<el-upload class="upload-demo" drag :action="uploadAction" :file-list="fileList" :on-success="handleUploadSuccess"
				:on-error="handleUploadError" :limit="1" :on-remove="handleFileRemove" :before-upload="beforeUpload" multiple>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="图形资料文件" :visible.sync="isChakan" width="30%" :before-close="handleClose">
			<el-image :src="mapfile"></el-image>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isChakan = false">取 消</el-button>
				<el-button type="primary" @click="isChakan = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		blockDetailMap,
		addBlockMap,
		upload,
		delBlockMap,
		delMultipleBlockMap
	} from '@/api/industry'
	export default {
		props: {
			blockType: String,
			blockid: String,
			blockno: String
		},
		name: "fangwuxianzhuang",
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
				},
				addQuery: {
					maporderno: '',
					mapno: '',
					maptext: '',
					mapfile:''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				list: [],
				listLoading: false,
				dialogVisible: false,
				isChakan: false,
				type: 1,
				mapfile: '',
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				fileList: [],
        currentFileSrc: [],
				arrID:[]
			};
		},

		computed: {},

		mounted() {
			this.blockDetailMap()
		},

		methods: {
			blockDetailMap() {
				
				if(this.blockno){
					let data = {
						pageSize: this.listQuery.pageSize,
						pageNum: this.listQuery.pageNum,
						BlockNo: this.blockno
					}
					blockDetailMap(data).then(res => {
						this.list = res.data.list
						this.total = res.data.total
					})
				}
			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			chakan(type) {
				this.isChakan = true
				this.mapfile = type
			},
			save() {
				let data = this.addQuery
				data.blockno = this.blockno
				addBlockMap(data).then(res => {
					console.log(res)
					this.dialogVisible = false;
					this.blockDetailMap()
					this.fileList = []
					this.addQuery.maporderno= '',
					this.addQuery.mapno= '',
					this.addQuery.maptext= '',
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
				this.reter()
			},
			handleDelete(mapid) {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						mapid:mapid
					}
					delBlockMap(data).then(res => {
						console.log(res)
						this.dialogVisible = false;
						this.blockDetailMap()
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			reter() {
				this.addQuery.maporderno = '',
					this.addQuery.date = '',
					this.addQuery.contentmemo1 = ''
			},
			// 上传前验证
			beforeUpload(file) {
				const isExcel = file.type === 'application/vnd.ms-excel' ||
					file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
				// if (!isExcel) {
				//     this.$message.error('只能上传 Excel 文件！');
				//     return false;
				// }

				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传文件大小不能超过 2MB!');
					return false;
				}

				return true;
			},
			// 文件选择变化
			handleFileRemove(file, fileList) {
				this.fileList = fileList;
				let arr = [...this.currentFileSrc];
				let i;
				arr.forEach((item, index) => {
					if (item.fileSize == file.size && item.name == file.name) {
						i = index
					}
				})
				arr.splice(i, 1);
				this.currentFileSrc = arr;
				console.log(this.currentFileSrc)

			},
			// 上传成功
			handleUploadSuccess(response, file, fileList) {
				this.fileList = fileList
				if (response.code == 200) {
					this.$message.success('文件上传成功');
					this.currentFileSrc.push(response.data)
					
					this.addQuery.mapfile = response.data.url
				} else {
					this.$message.error('文件上传失败');
					let arr = [...fileList.map(i => i)]
					arr.pop();
					this.fileList = arr;

				}
			},
			// 上传失败
			handleUploadError(err, file) {
				this.$message.error('文件上传失败');
			},

			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.blockDetailMap()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.blockDetailMap()
			},
			returns() {
				this.$router.go(-1)
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.reter()
					})
					.catch(_ => {});
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			// 批量删除所
			selectChange(e) {
				console.log(e)
				let arrID = []
				e.forEach((item,index)=>{
					arrID.push(item.mapid)
				})
				this.arrID = arrID
			},
			alldelete(){
				if(this.arrID.length>0){
					let data = {
						mapid:this.arrID
					}
					delMultipleBlockMap(data).then(res=>{
						console.log(res)
						this.$message({
							type: 'success',
							message: '操作成功'
						});
						this.blockDetailMap()
					})
				}else{
					this.$message({
						type: 'success',
						message: '请选择删除对象!'
					});
				}
				
				
			}
		},
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}


	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.fangwuList {
		width: 100%;
		background-color: #F5F5F5;
		margin: 3px auto 0;
		overflow: hidden;
	}

	.fangwuText {
		font-weight: bold;
		font-size: 16px;
		color: #008C93;
		margin-top: 20px;
		margin-left: 26px;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.upload-demo {
		display: flex;
		justify-content: space-around;
	}
</style>